<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:type="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>个人资料</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/resources/css/public.css" media="all" />
    <link rel="stylesheet" href="/resources/layui_ext/dtree/dtree.css" media="all" />
    <link rel="stylesheet" href="/resources/layui_ext/dtree/font/dtreefont.css" media="all" />
</head>
<body class="childrenBody">
<form class="layui-form layui-row" method="post" id="dataFrm" lay-filter="dataFrm">
    <div class="layui-col-md3 layui-col-xs12 user_right">
        <div class="layui-upload-list userFace">
            <input type="hidden" name="imgpath" id="imgpath">
            <img class="layui-upload-img layui-circle userFaceBtn userAvatar" id="userFace">
        </div>
        <button type="button" class="layui-btn layui-btn-primary userFaceBtn"><i class="layui-icon">&#xe67c;</i> 掐指一算，我要换一个头像了</button>
        <p>由于是纯静态页面，所以只能显示一张随机的图片</p>
    </div>
    <div class="layui-col-md6 layui-col-xs12">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" id="loginname" name="loginname" disabled class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">真实姓名</label>
            <div class="layui-input-block">
                <input type="hidden" id="id" name="id"  th:value="${session.user.id}" disabled class="layui-input">
                <input type="text" id="name" name="name"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户地址</label>
            <div class="layui-input-block">
                <input type="text" name="address" id="address"  class="layui-input">
            </div>
        </div>
       <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block userSex">
                <input type="radio" name="sex" value="1" title="男">
                <input type="radio" name="sex" value="0" title="女">
            </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
                <label class="layui-form-label">我的部门</label>
                <div class="layui-input-inline">
                    <input type="hidden" name="deptid" id="deptid">
                    <ul id="deptTree" class="dtree" data-id="0"></ul>
                </div>
                <label class="layui-form-label">我的职位</label>
	            <div class="layui-input-inline">
	                <input type="text" name="remark" id="remark"  class="layui-input">
	            </div>
            </div>
           </div> 
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">领导部门</label>
                <div class="layui-input-inline">
                    <ul id="leaderdeptTree" class="dtree" data-id="0"></ul>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">直属领导</label>
                <div class="layui-input-inline">
                    <select name="mgr" id="mgr">
                        <option value="2" >请选择直属领导</option>
                    </select>
                </div>
            </div>
        </div>
        
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="changeUser">立即提交</button>
            </div>
        </div>
    </div>
</form>
<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript">
	layui.extend({
	    dtree: '/resources/layui_ext/dtree/dtree'
	}).use(['jquery','upload','form','dtree'],function () {

        var $ = layui.jquery;
        var upload = layui.upload;
        var form = layui.form;
        var dtree = layui.dtree;
        
        
        //初始化添加弹出层所属部门的下拉列表
        var deptTree=dtree.renderSelect({
            elem: "#deptTree",
            width: "100%", // 可以在这里指定树的宽度来填满div
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            dataFormat: "list",  //配置data的风格为list
            response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
            url: "/dept/loadDeptManagerLeftTreeJson" // 使用url加载（可与data加载同时存在）
        });
        
        //初始化添加弹出层领导部门的下拉列表
        var leaderdeptTree=dtree.renderSelect({
            elem: "#leaderdeptTree",
            width: "100%", // 可以在这里指定树的宽度来填满div
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            dataFormat: "list",  //配置data的风格为list
            response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
            url: "/dept/loadDeptManagerLeftTreeJson" // 使用url加载（可与data加载同时存在）
        });
        
      //监听点击的方法
        dtree.on("node(leaderdeptTree)" ,function(obj){
            var deptid=obj.param.nodeId;
            //根据部门ID查询当前部门下面的领导列表
            $.get("/user/loadUsersByDeptId",{deptid:deptid},function(res){
                var users=res.data;
                var dom_mgr=$("#mgr");
                var html="<option value='0'>请选择直属领导</option>";
                $.each(users,function(index,item){
                    html+="<option value='"+item.id+"'>"+item.name+"</option>";
                });
                dom_mgr.html(html);
                //重新渲染
                form.render("select");
            });
        });
		
      	//个人信息赋值
        $(function(){
        	   //获得当前用户的登陆名
        	   var id = $("#id").val();
            $.get('/user/loadUserByUId',{id:id},function (res) {
            	console.log(res)
            	//表单赋值
    			form.val("dataFrm",res);
    			var imgpath = res.imgpath;
                $('#userFace').attr('src','/file/showImageByPath?path='+imgpath);
                //部门赋值
                dtree.dataInit("deptTree", res.deptid);
                dtree.selectVal("deptTree");
                
                //选中领导部门
                //根据领导ID查领导  选中领导的部门 
                var leaderid=res.mgr;
                $.get("/user/loadUserById",{id:leaderid},function(res){
                    var d=res.data;
                    dtree.dataInit("leaderdeptTree", d.deptid);
                    dtree.selectVal("leaderdeptTree");
                    $.get("/user/loadUsersByDeptId",{deptid:d.deptid},function(res){
                        var users=res.data;
                        var dom_mgr=$("#mgr");
                        var html="<option value='0'>请选择直属领导</option>";
                        $.each(users,function(index,item){
                            html+="<option value='"+item.id+"'>"+item.name+"</option>";
                        });
                        dom_mgr.html(html);
                        //选中一个
                        dom_mgr.val(leaderid);
                        //重新渲染
                        form.render("select");
                    });
                })
                
                
//                 //领导部门和领导赋值
//                 dtree.dataInit("leaderdeptTree", res.mgr);
//                 dtree.selectVal("leaderdeptTree");
//                 var leaderid = res.mgr;
//                 $.get("/user/loadUsersByDeptId",{deptid:res.mgr},function(res){
//                     var users=res.data;
//                     var dom_mgr=$("#mgr");
//                     var html="<option value='0'>请选择直属领导</option>";
//                     $.each(users,function(index,item){
//                         html+="<option value='"+item.id+"'>"+item.name+"</option>";
//                     });
//                     dom_mgr.html(html);
//                     //选中一个
//                     dom_mgr.val(leaderid);
//                     //重新渲染
//                     form.render("select");
//                 });
                
            });
    		})
      

        //上传头像
        upload.render({
            elem: '.userFaceBtn',
            url: '/file/uploadFile',
            acceptMime:'image/*',
            field:'mf',
            method : "post",
            done: function(res, index, upload){
                var path=res.path;
                $('#userFace').attr('src','/file/showImageByPath?path='+path);
                $('.userFace').css("background","#fff");
                //给隐藏域赋值
                $("#imgpath").val(path);
            }
        });

        //提交个人资料
        form.on("submit(changeUser)",function(data){
//             var index = layer.msg('提交中，请稍候',{icon: 16,time:false,shade:0.8});
            console.log(data.field);
            
            $.post("/user/updateUser", 
            		{id:data.field.id,
            		 name:data.field.name,
            		 address:data.field.address,
            		 sex:data.field.sex,
            		 remark:data.field.remark,
            		 deptid:data.field.deptid,
            		 imgpath:data.field.imgpath,
            		 mgr:data.field.mgr
            	}
            , function (res) {
            	
                layer.msg(res.msg);
            });
//             setTimeout(function(){
//                 layer.close(index);
//                 layer.msg("提交成功！");
//             },2000);
//             return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        })
    });


</script>

</body>
</html>